<template>
  <div class="sptc-action">
    <el-form :model="form" label-width="">

      <div class="model-title">基础信息</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="套餐名称">
            <el-input v-model="form.tcname" placeholder="请输入套餐名称，不可超出10字符" maxlength="10" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="model-title">商品明细 <a style="cursor:pointer;float:right;color:rgb(24, 144, 255);font-weight: 100;" @click="goodsDialogVisible = true">添加商品</a></div>
      <div class="spmx-wrap">
        <div class="spmx-item" v-for="index in 2" :key="index">
          <el-row>
            <el-col :span="8">
              <p>商品类型：课程</p>
              <p>付款类型：预充值</p>
            </el-col>
            <el-col :span="8">
              <p>商品名称：语文精品班（课程类型：1 V 1）</p>
              <p>适用年级：小学三年级、四年级</p>
            </el-col>
            <el-col :span="8">
              <p>形式：线下</p>
              <p>定价：600元/课时<el-icon style="float:right;margin-right: 10px;cursor:pointer;" color="rgb(24, 144, 255)" :size="20" @click="deleteDialogVisible = true">
                  <Delete />
                </el-icon>
              </p>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="model-title">套餐价格</div>
      <div>
        <el-row>
          <el-col :span="8">
            <p>套餐原价：700元/课时</p>
            <el-form-item label="折扣力度">
              <el-input v-model.number="form.zkld" placeholder="请选择0.01-0.99数字" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否允许二次优惠">
              <el-input v-model.number="form.zkld" placeholder="请选择" />
            </el-form-item>
            <p>套餐售价：560元/课时 <span style="color:#ccc;">套餐手机=套餐原价*折扣力度 </span></p>
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动类型">
              <el-select v-model="form.type" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否上架">
              <el-switch v-model="form.status" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <!-- 弹出的商品列表 -->
    <el-dialog v-model="goodsDialogVisible" title="选择商品" width="70%">
      <el-form :model="formgoods" label-width="">
        <el-row>
        <el-col :span="8">
          <el-form-item label="商品名称">
            <el-input v-model="form.tcname" placeholder="商品名称"  />
          </el-form-item>
          <el-form-item label="是否上架">
            <el-input v-model="form.tcname" placeholder="是否上架"   />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类型">
            <el-input v-model="form.tcname" placeholder="商品类型"   />
          </el-form-item>
          <el-form-item label="适用年级">
            <el-input v-model="form.tcname" placeholder="适用年级"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程类型">
            <el-input v-model="form.tcname" placeholder="课程类型"  />
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <el-table :data="gridData">
        <el-table-column property="date" label="商品编号" width="150" />
        <el-table-column property="name" label="商品名称" width="200" />
        <el-table-column property="name" label="课程类型" />
        <el-table-column property="name" label="形式" />
        <el-table-column property="name" label="状态" />
        <el-table-column property="name" label="适用年级" />
        <el-table-column property="name" label="付款类型" />

      </el-table>
    </el-dialog>
    <!-- 弹出删除框 -->
    <el-dialog v-model="deleteDialogVisible" title="删除商品" width="30%" center>
    <span
      >是否确认删除该商品？</span
    >
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">确认</el-button>
        <el-button type="primary" @click="deleteDialogVisible = false"
          >取消</el-button
        >
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
const form = reactive({
  tcname: "",
  zkld: 0,
  type: "Option1",
  status: true
});
const formgoods = reactive({
  goodname: "",
  goodtype: "Option1",
  classtype: "Option1",
  status: "Option1",
  grade: true
});
const options = [
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  }
];
const gridData = [
  {
    date: "2016-05-02",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District"
  },
  {
    date: "2016-05-04",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District"
  },
  {
    date: "2016-05-01",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District"
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District"
  }
];
let goodsDialogVisible = ref(false);
let deleteDialogVisible = ref(false);
</script>

<style lang="scss" scoped>
.model-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}
.spmx-wrap {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 30px;
}
.spmx-item {
  background-color: rgb(231, 244, 255);
  padding: 0 10px;
}
.spmx-item + .spmx-item {
  border-top: 1px solid #ccc;
}
.sptc-action {
  ::v-deep .el-form-item__content {
    // width: 80% !important;
    .el-input {
      width: 80% !important;
    }
  }
}
</style>
